<template>
  <div class="goodsbaseinfo">
    <div class="title">
      <span>{{ Goods.title }}</span>
    </div>
    <div class="price">
      <span class="realPrice">￥{{ Goods.realPrice }}</span>
      <span class="oldPrice">{{ Goods.oldPrice }}</span>
      <span class="discount" v-if="Goods.discount">{{ Goods.discount }}</span>
    </div>

    <div class="infoother" v-if="Goods.columns!== undefined &&Goods.services!== undefined">
      <span>{{ Goods.columns[0] }}</span>
      <span>{{ Goods.columns[1] }}</span>
      <span>{{ Goods.services[Goods.services.length - 1].name }}</span>
    </div>
    <div class="infoserver">
        <span class="infoserver-item"  v-if="Goods.services !== undefined">
            <img :src="Goods.services[0].icon" alt="">
            <span>{{Goods.services[0].name}}</span>
        </span>

        <span class="infoserver-item" v-if="Goods.services !== undefined">
            <img :src="Goods.services[1].icon" alt="">
            <span>{{Goods.services[1].name}}</span>
        </span>

        <span class="infoserver-item"  v-if="Goods.services !== undefined">
            <img :src="Goods.services[2].icon" alt="">
            <span>{{Goods.services[2].name}}</span>
        </span>
    </div>
  </div>
</template>

<script>
export default {
  name: "DetailBaseInfo",
  props: {
    Goods: {
      type: Object,
      default() {
        return {};
      },
      //   currentindex:0
    },
    create() {},
  },
};
</script>

<style scoped>
.infoserver{
    display: flex;
    justify-content: space-between;
    font-size: 4vw;
    color: #3CB371;
    margin-top: 3vw;
}
.infoserver-item img{
   width: 4vw;
   height: 4vw; 
   margin-bottom: -0.4vw;
}
.goodsbaseinfo {
  font-size: 5vw;
  text-align: left;
  line-height: 6vw;
  margin-left: 1vw;
  margin-right: 0.5vw;
  padding-top: 3vw;
  padding-bottom: 2vw;
  border-bottom: 1vw solid #f5f5f5;
}
.title {
  text-indent: 2em;
  height: auto;
}
.price {
  margin-top: 5vw;
  margin-bottom: 5vw;
}
.realPrice {
  color: #db7093;
  font-size: 7vw;
  font-weight: bold;
}
.price span {
  margin-right: 3vw;
}
.discount {
  font-size: 6vw;
  font-weight: bold;
  color: #DC143C;;
}
.oldPrice {
  text-decoration: line-through;
}
.infoother {
  display: flex;
  justify-content: space-between;
  font-size: 4vw;
}
</style>